<template>
  <!-- 财务明细 -->
  <div class="financeDetails">
    <serchForm
      :Form="financeForm"
      :FormLabel="financeFormLabel"
      @onSearch="onSearch"
    />

    <forTableCom
      :bg="bg"
      :color="color"
      :idActive="idActive"
      :limit="pageSize"
      :page="pageNum"
      :tableData="financeTableData"
      :tableHeaderData="financeTableHeaderData"
      :total="totals"
      @handleChange="handleChange"
      @handleSelectionChange="handleSelectionChange"
      @tableDetail="tableDetail"
      @updatePage="updatePage"
    >
      <el-table-column
        :align="'center'"
        class-name="operate"
        fixed="right"
        label="操作"
        width="120px"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-button
            v-show="scope.row.voucherStatusItem == '未生成'"
            @click="succeed(scope.row.id)"
          >生成凭证
          </el-button>
        </template>
      </el-table-column>
    </forTableCom>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { createVoucherApi, selectProductionListApi } from '@/api/finance'
import dayjs from 'dayjs'

const { proxy } = getCurrentInstance()

let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 勾选激活行的背景色
const idActive = 'orderId'
// 表单
let financeForm = ref(
  {
    orderDate: '',
    orderId: '',
    customerId: '',
    customerStore: '',
    creator: '',
    deptId: ''
  }
)
// 表单数据标题
let financeFormLabel = ref([
  {
    name: 'orderDate',
    label: '单据日期',
    type: 'datetimerange'
  },
  {
    name: 'orderId',
    label: '单据编号',
  },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer'
  },
  {
    name: 'outsourcingName',
    label: '外协名称',
    type: 'customer'
  },
  {
    name: 'customerStore',
    label: '终端门店'
  },
  {
    name: 'creator',
    label: '制单人'
  },
  {
    name: 'deptId',
    label: '部门',
    type: 'department'
  },
  {
    name: 'voucherStatusItem',
    label: '凭证状态',
    type: 'voucherStatusItem'
  }
])

// 表格表头数据
let financeTableHeaderData = ref([

  {
    prop: 'orderDate',
    label: '单据日期',
    width: 200,
  },
  {
    prop: 'orderId',
    label: '单据编号',
    width: 170
  },
  {
    prop: 'voucherStatusItem',
    label: '是否生成凭证',
    minwidth: 120
  },
  {
    prop: 'customerName',
    label: '客户名称',
    minwidth: '150'
  },
  {
    prop: 'outsourcingName',
    label: '外协名称',
    minwidth: '240'
  },
  {
    prop: 'creator',
    label: '制单人'
  },
  {
    prop: 'deptName',
    label: '部门',
    minwidth: '110'
  },
  {
    prop: 'null',
    label: '整单结算'
  },
  {
    prop: 'customerStore',
    label: '终端门店',
    minwidth: '200'
  },
  {
    prop: 'contactPerson',
    label: '联系人'
  },
  {
    prop: 'productName',
    label: '存货名称',
    minwidth: '100'
  },
  {
    prop: 'productionContent',
    label: '制作内容',
    minwidth: '100'
  },
  {
    prop: 'width',
    label: '宽'
  },
  {
    prop: 'height',
    label: '高'
  },
  {
    prop: 'quantityPerPiece',
    label: '件数'
  },
  {
    prop: 'totalQuantity',
    label: '数量'
  },
  {
    prop: 'salePrice',
    label: '销售单价'
  },
  {
    prop: 'amount',
    label: '销售金额'
  },
  {
    prop: 'price',
    label: '成本单价'
  },
  {
    prop: 'salePriceAll',
    label: '成本金额'
  },
  {
    prop: 'actualCost',
    label: '实际成本'
  },
  {
    prop: 'invoiceStatus',
    label: '单据状态'
  },
  {
    prop: 'materialFee',
    label: '材料费'
  },
  {
    prop: 'installationFee',
    label: '安装费（固定）'
  },
  {
    prop: 'installationFee2',
    label: '安装费（按天）'
  },
  {
    prop: 'urbanManagementFee',
    label: '城管费合计'
  },
  {
    prop: 'remarks',
    label: '备注'
  },

])

// 表格数据内容
let financeTableData = ref([])
// 详情双击行
const tableDetail = (props) => {
  flag.value = true
  disabled.value = true
}
// 接口
const selectProductionListApiFn = async (data) => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)
  let { code, rows, total } = await selectProductionListApi(params)
  if (code == 200) {
    financeTableData.value = rows
    totals.value = total
  }
}

// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

let orderDateLte = ref(null)
let orderDateGte = ref(null)
let searchData = ref(null)
// 查找suppliersName
const onSearch = (v) => {
  orderDateLte.value = v.orderDate[0]
  orderDateGte.value = dayjs(v.orderDate[1]).subtract(1, 'second').format('YYYY-MM-DD HH:mm:ss')
  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...v
  }
  params.orderDate = null
  pageNum.value = 1
  searchData.value = v
  selectProductionListApiFn(params)
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit


  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...searchData.value
  }
  params.orderDate = null

  selectProductionListApiFn(params)
}

const succeed = async (id) => {
  let params = {
    productionId: id
  }
  let res = await createVoucherApi(params)
  if (res.code == 200) {
    proxy.$modal.msgSuccess(res.msg);
    selectProductionListApiFn()
  }
}
onMounted(() => {
  selectProductionListApiFn()
})
</script>

<style lang="scss" scoped>
.financeDetails {
  padding: 16px;
}
</style>